import { useState } from "react";
import { FaPaperPlane } from "react-icons/fa";

// 丰富的表情包分类
const emojiCategories = [
  {
    name: "常用",
    emojis: [
      { symbol: "😀", name: "微笑" },
      { symbol: "😂", name: "大笑" },
      { symbol: "🥰", name: "开心" },
      { symbol: "😎", name: "酷" },
      { symbol: "😊", name: "害羞" },
      { symbol: "😍", name: "爱慕" },
      { symbol: "👍", name: "赞" },
      { symbol: "👏", name: "鼓掌" },
      { symbol: "❤️", name: "爱心" },
      { symbol: "🔥", name: "火" },
    ],
  },
  {
    name: "动物",
    emojis: [
      { symbol: "🐶", name: "狗" },
      { symbol: "🐱", name: "猫" },
      { symbol: "🐭", name: "老鼠" },
      { symbol: "🐰", name: "兔子" },
      { symbol: "🦊", name: "狐狸" },
      { symbol: "🐻", name: "熊" },
      { symbol: "🐼", name: "熊猫" },
      { symbol: "🐨", name: "考拉" },
      { symbol: "🦁", name: "狮子" },
      { symbol: "🐯", name: "老虎" },
    ],
  },
  {
    name: "食物",
    emojis: [
      { symbol: "🍎", name: "苹果" },
      { symbol: "🍌", name: "香蕉" },
      { symbol: "🍇", name: "葡萄" },
      { symbol: "🍓", name: "草莓" },
      { symbol: "🍒", name: "樱桃" },
      { symbol: "🍕", name: "披萨" },
      { symbol: "🍔", name: "汉堡" },
      { symbol: "🍟", name: "薯条" },
      { symbol: "🍦", name: "冰淇淋" },
      { symbol: "🍩", name: "甜甜圈" },
    ],
  },
  {
    name: "活动",
    emojis: [
      { symbol: "⚽", name: "足球" },
      { symbol: "🏀", name: "篮球" },
      { symbol: "🎮", name: "游戏" },
      { symbol: "🎯", name: "飞镖" },
      { symbol: "🎵", name: "音乐" },
      { symbol: "🎧", name: "耳机" },
      { symbol: "🎬", name: "电影" },
      { symbol: "🏊", name: "游泳" },
      { symbol: "🎨", name: "绘画" },
      { symbol: "🎭", name: "戏剧" },
    ],
  },
  {
    name: "物体",
    emojis: [
      { symbol: "⌚", name: "手表" },
      { symbol: "📱", name: "手机" },
      { symbol: "💻", name: "电脑" },
      { symbol: "🎁", name: "礼物" },
      { symbol: "⏰", name: "闹钟" },
      { symbol: "📷", name: "相机" },
      { symbol: "🔑", name: "钥匙" },
      { symbol: "💡", name: "灯泡" },
      { symbol: "🔦", name: "手电筒" },
      { symbol: "🧹", name: "扫帚" },
    ],
  },
  {
    name: "符号",
    emojis: [
      { symbol: "✅", name: "完成" },
      { symbol: "❌", name: "错误" },
      { symbol: "❓", name: "疑问" },
      { symbol: "❗", name: "感叹" },
      { symbol: "⭐", name: "星星" },
      { symbol: "💯", name: "满分" },
      { symbol: "🔅", name: "弱光" },
      { symbol: "🔆", name: "强光" },
      { symbol: "⚡", name: "闪电" },
      { symbol: "🌈", name: "彩虹" },
    ],
  },
];

interface EmojiCardProps {
  onSelect: (emoji: string) => void;
  onSend: () => void;
}

export default function EmojiCard({ onSelect, onSend }: EmojiCardProps) {
  const [activeCategory, setActiveCategory] = useState(0);

  return (
    <div className="w-full bg-white">
      <div className="flex border-b border-gray-200 overflow-x-auto">
        {emojiCategories.map((category, index) => (
          <button
            key={index}
            className={`px-3 py-2 whitespace-nowrap text-sm ${
              activeCategory === index
                ? "text-blue-500 font-medium border-b-2 border-blue-500"
                : "text-gray-500"
            }`}
            onClick={() => setActiveCategory(index)}
          >
            {category.name}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-8 gap-2 p-3 max-h-40 overflow-y-auto">
        {emojiCategories[activeCategory].emojis.map((emoji, index) => (
          <button
            key={index}
            className="flex items-center justify-center w-8 h-8 text-xl hover:bg-gray-100 rounded-md transition-colors"
            onClick={() => onSelect(emoji.symbol)}
            title={emoji.name}
          >
            {emoji.symbol}
          </button>
        ))}
      </div>

      <div className="flex justify-end p-2 border-t border-gray-200">
        <button
          className="btn btn-sm btn-primary flex items-center"
          onClick={onSend}
        >
          发送 <FaPaperPlane className="ml-1" />
        </button>
      </div>
    </div>
  );
}
